<template>
  <div>
    <el-container>
      <el-header>
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
        >
          <el-menu-item index="1" ref=""> 上传扫描图片 </el-menu-item>
          <el-menu-item index="2"> 模型交互 </el-menu-item>
          <el-menu-item index="3"> 点云编辑 </el-menu-item>
        </el-menu>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu>
            <div
              v-for="(models_groupname, groupindex) in groups"
              :key="groupindex"
            >
              <el-submenu :index="groupindex">
                <template slot="title"
                  ><i class="el-icon-folder"></i
                  >{{ models_groupname[1] }}</template
                >
                <el-menu-item-group>
                  <el-menu-item
                    v-for="(item, modelindex) in models_groupname[0]"
                    :key="modelindex"
                    @click="handleModelSelect(groupindex, modelindex)"
                  >
                    {{ item }}
                  </el-menu-item>
                </el-menu-item-group>
              </el-submenu>
            </div>
          </el-menu>
        </el-aside>
        <el-main>
          <div id="pointcloud"></div>
          <div class="seg_div">
            <div class="slider_holder">
              <span class="slider_demonstration">x</span>
              <el-slider
                class="slider_bar"
                v-model="range_x"
                range
                show-stops
                :max="100"
              >
              </el-slider>
            </div>
            <div class="slider_holder">
              <span class="slider_demonstration">y</span>
              <el-slider
                class="slider_bar"
                v-model="range_y"
                range
                show-stops
                :max="100"
              >
              </el-slider>
            </div>
            <div class="slider_holder">
              <span class="slider_demonstration">z</span>
              <el-slider
                class="slider_bar"
                v-model="range_z"
                range
                show-stops
                :max="100"
              >
              </el-slider>
            </div>
            <div class="button_holder">
              <el-button type="primary" plain>裁剪</el-button>
            </div>
            <div class="button_holder">
              <el-button type="primary" plain>去噪</el-button>
            </div>
            <div class="button_holder">
              <el-button type="primary" plain>转为mesh</el-button>
            </div>
            <div class="button_holder">
              <el-button type="primary" plain>mesh着色</el-button>
            </div>
            <div class="button_holder">
              <el-button type="primary" plain>下载mesh</el-button>
            </div>
            <div class="checkboxholder">
              <div class="seg_div">
                <el-checkbox v-model="checked_dis_raw_point"
                  >显示原点云</el-checkbox
                >
              </div>
              <div class="seg_div">
                <el-checkbox v-model="checked_dis_point"
                  >显示加工后点云</el-checkbox
                >
              </div>
            </div>
          </div>
        </el-main>
      </el-container>
      <el-footer style="padding-left: 200px"
        ><div style="background-color: aquamarine">
          <div class="seg_div">
            <el-button type="primary" round @click="handleSubmitPos(pos)"
              >提交点云</el-button
            >
          </div>

          <div class="seg_div">
            <el-checkbox v-model="checked_dis_mesh">显示mesh</el-checkbox>
          </div>
        </div></el-footer
      >
    </el-container>
  </div>
</template>
  
  <script>
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import { DragControls } from "three/addons/controls/DragControls.js";
import { TransformControls } from "three/addons/controls/TransformControls.js";
import { PLYLoader } from "three/addons/loaders/PLYLoader.js";
import { GUI } from "three/addons/libs/lil-gui.module.min.js";
import axios from "axios";
export default {
  data() {
    return {
      activeIndex: "3",
      groups: [
        [["模型1", "模型2", "模型3"], "模型分组一"],
        [["模型4", "模型5", "模型6"], "模型分组二"],
      ],
      range_x: [0, 100],
      range_y: [0, 100],
      range_z: [0, 100],

      checked_dis_mesh: true,
      checked_dis_raw_point: true,
      checked_dis_point: true,
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
      let index2path = ["/upload", "/render", "/pointcloudedit"];
      if (index2path[key - 1] != "/pointcloudedit") {
        this.$router.push({
          path: index2path[key - 1],
        });
      }
    },
    handleModelSelect(groupindex, modelindex) {
      alert("当前选中" + groupindex + "," + modelindex);
    },
  },
  mounted() {
    //set event
    //rendering the pointcloud
    // 三维场景
    const scene = new THREE.Scene();
    // 模型对象
    // const geometry = new THREE.BoxGeometry(50, 50, 50);
    // const material = new THREE.MeshBasicMaterial({
    //   color: 0x0000ff,
    // });
    // const mesh = new THREE.Mesh(geometry, material);
    // scene.add(mesh);
    var objects = [];
    // 加载并展示PLY点云文件
    const loader = new PLYLoader();
    loader.load("test.ply", function (geometry) {
      console.log(geometry);
      const material = new THREE.PointsMaterial({ color: 0xff0000, size: 0.1 });
      const points = new THREE.Points(geometry, material);
      scene.add(points);
      objects.push(points);
    });
    // AxesHelper：辅助观察的坐标系
    const axesHelper = new THREE.AxesHelper(2);
    scene.add(axesHelper);
    const width = 500; //宽度
    const height = 500; //高度
    // 相机
    const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);
    camera.position.set(10, 10, 10);
    camera.lookAt(0, 0, 0);
    // WebGL渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);
    renderer.render(scene, camera);
    

    // 设置相机控件轨道控制器OrbitControls
    const controls = new OrbitControls(camera, renderer.domElement);
    var transformControls = new TransformControls(camera, renderer.domElement);

    scene.add(transformControls);

    // 初始化拖拽控件
    var dragControls = new DragControls(objects, camera, renderer.domElement);
    var gui = new GUI();
    gui
      .add(dragControls, "enabled")
      .name("enabledrag")
      .onChange(() => {
        if (dragControls.enabled == false) {
          transformControls.enabled = false;
        } else {
          transformControls.enabled = true;
        }
      });
    // 获取父元素
    var parentElement = document.getElementById("pointcloud");
    parentElement.innerHTML = "";
    //three.js执行渲染命令会输出一个canvas画布(HTML元素)，插入到web页面中
    parentElement.appendChild(renderer.domElement);
    // 将GUI的DOM元素添加到父元素中
    parentElement.appendChild(gui.domElement);

    // 鼠标略过事件
    dragControls.addEventListener("hoveron", function (event) {
      // 让变换控件对象和选中的对象绑定
      transformControls.attach(event.object);
    });
    // 开始拖拽
    dragControls.addEventListener("dragstart", function () {
      controls.enabled = false;
    });
    // 拖拽结束
    dragControls.addEventListener("dragend", function () {
      controls.enabled = true;
    });
    function render() {
      renderer.render(scene, camera);
      requestAnimationFrame(render);
    }
    render();

    //******
    //show available model
    axios
      .get("http://192.168.1.10:3000/mock/15/availableModel")
      .then((result) => {
        console.log(result.data.data);
        let data = [];
        result.data.data.forEach((group) => {
          let modelList = [];
          group.modelNames.forEach((modelNames) => {
            modelList.push(modelNames);
          });
          data.push([modelList, group.groupName]);
        });
        this.groups = data;
      });
  },
};
</script>
  <style>
#pointcloud {
  display: flex;
  justify-content: center;
  align-items: center;
  float: left;
  /* background-color: rgb(240, 255, 127);  */
  width: 50%;
  height: 100%;
}
.seg_div {
  float: left;
  /* background-color: rgb(240, 255, 127);  */
  width: 50%;
  height: 100%;
}
.slider_holder {
  display: flex;
}
.slider_demonstration {
  flex: 3;
  /* background-color: aqua; */
  font-size: 30px;
}
.slider_bar {
  /* background-color:bisque; */
  flex: 7;
}
.button_holder {
  margin-top: 20px;
}
.checkboxholder {
  margin-top: 30px;
}
</style>